<!DOCTYPE html>
<html>
  <head>
    <title>权限管理</title>
    <meta charset="UTF-8">
	<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
	<link rel="stylesheet" type="text/css" href="css/style.css">
	<style type="text/css">
		main{
			margin-top:80px;
			margin-left: 180px;
		}
		main button{
			margin-buttom:50px;
		}
	</style>
  </head>
  <body>
    <header class="navbar-fixed-top">
		<div class="navbar-header">
			<span class="glyphicon glyphicon-option-vertical"></span>
			<label>服装店Pos管理系统</label>
		</div>
		<div>
			<ul class="nav navbar-nav navbar-right">
				<li><a>欢迎你！</a></li>
				<li><a href="#">个人信息</a></li>
				<li><a id="loginOrOut" href="" ></a></li>
			</ul>
		</div>
	</header>
	<nav class="navbar navbar-default nav-bgcolor navbar-fixed-top nav-vertical">
		<div class="container-fluid">
			<ul class="nav nav-stacked">
				<li><a href="storehouse.html" >商品管理</a></li>
				<li ><a href="order.html">订单管理</a></li>
				<li id="test"><a href="#">会员管理</a></li>
				<li id="showQuanXian"><a href="quanxian.html">员工管理</a></li>
				<li><a href="cashier.html">支付</a></li>
			</ul>
		</div>
	</nav>
	<main>
		<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#addEmployee">添加员工</button>
		<div id="emplyee-table" class="table">
			<table align="center" class="table table-striped table-hover" >
				<thead>
					<tr>
						<th style="display:none">id</th><th>姓名</th><th>性别</th><th style="display:none">departmentId</th><th>职称</th><th>等级</th><th>操作</th>
					</tr>
				</thead>
				<tbody id="employeeList">
				</tbody>
			</table>
		</div><!-- /.#order-table -->
	</main>
	<!-- 添加商品的表格  -->
	<div id="addEmployee" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="add employee" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true" onclick="resetForm()">&times;</button>
					<h4>添加员工</h4>
				</div>
				<div class="modal-body">
					<form role="form">
						<div class="form-group">
							<label>姓名</label>
							<input id="name" type="text" class="form-control" name="name" >
						</div>
						<div class="form-group">
							<label>性别</label>
							<select id="gender" class="form-control">
								<option value="女">女</option>
								<option value="男">男</option>
							</select>
						</div>
						<div class="form-group">
							<label>密码</label>
							<input id="password" type="password" class="form-control" >
						</div>
						<div class="form-group">
							<label>部门</label>
							<select id="departmentName" class="form-control departmentName">
							</select>
						</div>
						<div class="form-group">
							<label>职称</label>
							<select id="jobTitle" class="form-control">
								<option value="超级管理员">超级管理员</option>
								<option value="管理员">管理员</option>
								<option value="销售员">销售员</option>
								<option value="进货员">进货员</option>
								<option value="观察者">观察者</option>
							</select>
						</div>
					</form>
				</div><!-- /.modal-body -->
				<div class="modal-footer">
					<button type="submit" class="btn btn-default" onclick="addEmployee()">提&nbsp;&nbsp;&nbsp;交</button>
					<button type="reset" class="btn btn-default" onclick="resetForm()">重&nbsp;&nbsp;&nbsp;置</button>
				</div>
			</div><!-- /.modal-content -->
		</div><!-- /.modal-dialog -->
	</div><!-- /.#addEmployee -->
	<!-- 修改员工的表格  -->
	<div id="updateEmployee" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="updateEmployee" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true" onclick="resetForm()">&times;</button>
					<h4>修改权限</h4>
				</div>
				<div class="modal-body">
					<form role="form">
					<div class="form-group">
							<label>姓名</label>
							<input id="updatename" type="text" class="form-control" name="name" >
						</div>
						<div class="form-group">
							<label>性别</label>
							<select id="updategender" class="form-control">
								<option value="女">女</option>
								<option value="男">男</option>
							</select>
						</div>
						<div class="form-group">
							<label>密码</label>
							<input id="updatepassword" type="password" class="form-control" >
						</div>
						<div class="form-group">
							<label>部门</label>
							<select  id="updatedepartmentName" class="form-control departmentName">
							</select>
						</div>
						<div class="form-group">
							<label>职称</label>
							<select id="updatejobTitle" class="form-control">
								<option value="超级管理员">超级管理员</option>
								<option value="管理员">管理员</option>
								<option value="销售员">销售员</option>
								<option value="进货员">进货员</option>
								<option value="观察者">观察者</option>
							</select>
						</div>
					</form>
				</div><!-- /.modal-body -->
				<div class="modal-footer">
					<button type="submit" class="btn btn-default" onclick="updateEmployee()">完&nbsp;&nbsp;&nbsp;成</button>
				</div>
			</div><!-- /.modal-content -->
		</div><!-- /.modal-dialog -->
	</div><!-- /.#updateEmployee -->
    <script src="js/jquery-3.2.1.min.js"></script>
	<script src="js/bootstrap.min.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
			
			$.ajax({
				url : '/ClothesShopPOS/employee/list',
				type : "get",
				cache : false,
				success : function(data) {
					var resultList=JSON.parse(data).result;
					var table=$("#employeeList");
					
					for(var i in resultList){
						var temp=$("<tr><td style='display:none;'>"+resultList[i].id+"</td>"
						+"<td>"+resultList[i].name+"</td>"
						+"<td>"+resultList[i].gender+"</td>"
						+"<td style='display:none;'>"+resultList[i].departmentId+"</td>"
						+"<td>"+resultList[i].jobTitle+"</td>"
						+"<td>"+resultList[i].authLevel+"</td>"
						+"<td><button type='button' class='btn btn-default' onclick='showUpdateEmployee(this);'>修改</button></td></tr>"
						);
						temp.appendTo(table);
					}
				}
			})
			
			$.ajax({
				url : '/ClothesShopPOS/log/check_login',
                type: "get",
                cache : false,
                success : function(data) {
                    console.log(data);
                    data = JSON.parse(data);
                    if (data=='0'){
                        $("#loginOrOut").html("登录");
                        $("#loginOrOut").attr("href","login.html");
                    }else if(data=='1'){
                       $("#loginOrOut").html("退出");      
                       $("#loginOrOut").click(function(){
                       		if(confirm("确认退出吗？")){
                       			$.ajax({
		                       		url : '/ClothesShopPOS/log/logout',
					                type: "post",
					                cache : false,
					                success : function(data) {
					                	console.log(data);
		                    			data = JSON.parse(data);
		                    			if(data.statusCode=='0'){
		                    				alert("退出成功");
		                    				window.location.href="login.html";
		                    			}else{
		                    				alert("失败");
		                    			}
					                }
		                     	}) 
                       		}
                       });                
                	}
                }
			})
			
			$.ajax({
				url : '/ClothesShopPOS/department/list',
                type: "get",
                cache : false,
                success : function(data) {
                	var resultList=JSON.parse(data).result;
					var select=$(".departmentName");
					for(var i in resultList){
						var temp=$("<option value="+resultList[i].id+">"+resultList[i].name+"</option>");
						temp.appendTo(select);
					}
                }
			})
		});
		
		/*添加员工  */
		function addEmployee(){
			var jobTitle=$("#jobTitle").val(),authLevel;
			if(jobTitle=="超级管理员"){
				authLevel=0;
			}else if(jobTitle=="管理员"){
				authLevel=1;
			}else if(jobTitle=="销售员"){
				authLevel=2;
			}else if(jobTitle=="进货员"){
				authLevel=3;
			}else if(jobTitle=="观察者"){
				authLevel=4;
			}
			$.ajax({
				url : '/ClothesShopPOS/employee/add',
                type: "post",
                cache : false,
                data:{
                	name:$("#name").val(),
                	gender:$("#gender").val(),
                	password:$("#password").val(),
                	departmentId:$("#departmentName").val(),
                	jobTitle:jobTitle,
                	authLevel:authLevel
                },
                success : function(data) {
                	console.log(data);
           			//data = JSON.parse(data);
           			if(data.statusCode=='0'){
           				alert("添加成功");
           			}else if(data.statusCode=='11'){
				    	alert("您的权限不够，不能执行此操作！");
				    }else{
           				alert("添加失败");
           			}
           			resetForm();
			    	$("#addEmployee").modal('hide');
                }
			})
		}
		
		/* 清空<input>的内容 */
		function resetForm(){
			$("#addEmployee").find("input").val("");
			$("#updateEmployee").find("input").val("");
		}
		
		/*弹出更新员工的 模态框  */
		function showUpdateEmployee(obj){
			//alert("stj");
			$(obj).attr("data-toggle","modal");
			$(obj).attr("data-target","#updateEmployee");
			var name=$(obj).parent().parent().find("td").eq(1).text();
			var gender=$(obj).parent().parent().find("td").eq(2).text();
			var jobTitle=$(obj).parent().parent().find("td").eq(4).text();
			var authLevel=$(obj).parent().parent().find("td").eq(5).text();
			
			$("#updatename").val(name);
			$("#updategender").val(gender);
			$("#updatejobTitle").val(jobTitle);
		}
		
		/* 更新员工 */
		function updateEmployee(){
			var jobTitle=$("#updatejobTitle").val(),authLevel;
			if(jobTitle=="超级管理员"){
				authLevel=0;
			}else if(jobTitle=="管理员"){
				authLevel=1;
			}else if(jobTitle=="销售员"){
				authLevel=2;
			}else if(jobTitle=="进货员"){
				authLevel=3;
			}else if(jobTitle=="观察者"){
				authLevel=4;
			}
			$.ajax({
				url : '/ClothesShopPOS/employee/update',
                type: "post",
                cache : false,
                data:{
                	name:$("#updatename").val(),
                	gender:$("#updategender").val(),
                	password:$("#updatepassword").val(),
                	departmentId:$("#updatedepartmentName").val(),
                	jobTitle:jobTitle,
                	authLevel:authLevel
                },
                success : function(data) {
                // alert($("#updategender").val());
                	console.log(data);
           			data = JSON.parse(data);
           			if(data.statusCode=='0'){
           				alert("修改成功");
           			}else if(data.statusCode=='11'){
				    	alert("您的权限不够，不能执行此操作！");
				    }else{
           				alert("修改失败");
           			}
           			resetForm();
			    	$("#updateEmployee").modal('hide');
                }
			})
		}
	</script>
  </body>
</html>
